react 实现导出功能

2024-07-15 12:56:26| 来源: 网络整理| 查看: 265

方法一、不与后端接口联调，使用插件 xlsx-oc插件

安装

npm i xlsx-oc

使用，实例

import React, { useState, useEffect } from 'react' import { Button, message, Table } from 'antd'; import { exportExcel } from 'xlsx-oc' interface PostData { current: number pageSize: number companyId?: number tel?: number startTime?: number endTime?: number stockCode?: number } export default function Jsplumb() { //分页参数 const [postObj, setPostObj] = useState({ current: 1, pageSize: 10 }) const [total] = useState(10) const [data] = useState([{ companyName: 'nnn', phone: '123456', stockCode: 'www', link: 'jj', createTime: 'ooo' }]) //定义表头 const columns = [ { title: '序号', render: (text: any, record: any, index: any) => `${(postObj.current - 1) * postObj.pageSize + index + 1}`, }, { title: '公司', dataIndex: 'companyName', key: 'companyName', }, { title: '电话', dataIndex: 'phone', key: 'phone', }, { title: '股票代码', dataIndex: 'stockCode', key: 'stockCode', }, { title: '链接', dataIndex: 'link', key: 'link', }, { title: '时间', dataIndex: 'createTime', key: 'createTime', }, ]; const exportFile = () => { const list = [] for (let i = 0; i key: i, companyName: item.companyName, phone: item.phone, stockCode: item.stockCode, link: item.link, createTime: item.createTime, }) } const header = [{ k: 'companyName', v: '公司' }, { k: 'phone', v: '电话' }, { k: 'stockCode', v: '股票代码' }, { k: 'link', v: '链接' }, { k: 'createTime', v: '时间' },] exportExcel(header, list) } return ( width: '100%' }}> background: '#fff', width: '100%', padding: '28px' }}> marginBottom: '15px' }} onClick={exportFile}>导出 data} pagination={{ pageSize: postObj.pageSize, total: total, current: postObj.current, showSizeChanger: true }} /> ) }

在这里插入图片描述方法二、与后端联调，后端返回文件流

//导出 const exportFile = () => { service.exportFile(postObj).then((res: any) => { //后端返回blob格式文件流，前端进行转码，得到url,实现下载文件功能 let blob = new Blob([res], { type: 'application/vnd.ms-excel' }) let objectUrl = URL.createObjectURL(blob) downloadFile(objectUrl, '我的资源.xlsx') message.success('导出成功') }) } //下载文件 const downloadFile = (content, filename) => { let a = document.createElement('a') a.href = content a.download = filename a.click() } service.exportFileSaller(postObj).then((res: any) => { let tempBlob = new Blob([res], { type: 'application/json', }) const reader = new FileReader() reader.onload = e => { // 此处对fileReader读出的结果进行JSON解析 // 可能会出现错误，需要进行捕获 const result: any = e.target && e.target.result //判断返回格式是不是json,如果是，提示错误信息，不是就导出文件 try { //json const json = JSON.parse(result) message.error(json.errorMsg) } catch (err) { // 该异常为无法将字符串转为json // 说明返回的数据是一个流文件 // 不需要处理该异常，只需要捕获即刻 let blob = new Blob([res], { type: 'application/vnd.ms-excel', }) let objectUrl = URL.createObjectURL(blob) method.downloadFile(objectUrl, '资源管理.xlsx') message.success('导出成功') } } // 将blob对象以文本的方式读出，读出完成后将会执行 onload 方法 reader.readAsText(tempBlob) }) }

以上能实现导出功能，但文件不能打开注意点 1、在axios请求时，设置responseType responseType='blob' 或 responseType = 'arraybuffer'都行

let baseConfig: AxiosRequestConfig = { baseURL: config.domain, headers: { token: sessionStorage.getItem('token') || '', }, timeout: 8000, responseType: 'blob', }

2、看项目中是否使用mock.js,若使用，把mock注释掉原因：mock.js初始化时，给拦截响应设置了responseType:’’ 注意两者都要满足

vs code 插件 live server

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

react 实现导出功能

react 实现导出功能

今日新闻

点击排行

推荐新闻

图片新闻

专题文章